<template>
  <div class="user_page">
    <!-- <div class="content">
      <div class="top_icon">
        <div class="right_icon">
          <div @click="goToTopUp()">
            <img src="@/assets/img/qianbao.png" alt />
          </div>
          <div @click="goOnline" style="justify-content: flex-end;">
            <img style="width: 0.5rem;height: 0.5rem;" src="@/assets/img/kefu.png" alt />
          </div>
        </div>
      </div>
      <div class="users" @click="goWall()">
        <div class="left_tou">
          <div class="left_tx">
            <div>
              <img src="@/assets/img/eslogo.png" alt />
            </div>
          </div>
          <div class="right_name">
            <span>{{ userInfo.realName ? userInfo.realName : userInfo.phone }}</span>
          </div>
        </div>
        <div class="right_go">
          <img src="@/assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="center_card">
        <div class="keyon">
          <span>{{ $t('hj49') }}</span>
        </div>
        <div class="num_price" v-if="userInfo.length == 0">
          ¥0
        </div>
        <div class="num_price" v-if="userInfo.length != 0">
          <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account">
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
                $store.state.userInfo.userIndexAmt).toFixed(2)
            }}
          </p>
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account">
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
                $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}
          </p>
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account">¥&nbsp;&nbsp;{{ $store.state.hide ? '****' :
                Number($store.state.userInfo.userAmt).toFixed(2)
            }}</p>
        </div>
        <div class="yk es">
          <div>
            <span>{{ $t('hj55') }}</span>
          </div>
          <div>
            <span>{{ $t('hj141') }}</span>
          </div>

          <div>
            <span>{{ $t('hj48') }}</span>
          </div>
        </div>
        <div class="yk as">
          <div>
            <span class="orenge">¥ {{ userInfo.length != 0 ? ($store.state.userInfo.allFreezAmt + $store.state.userInfo.djzj).toFixed(2) : 0
            }}</span>
          </div>
          <div v-if="userInfo.length == 0">
            <span v-if="!selectUserFlag">
              <span>{{ '¥ 0' }}</span>
            </span>
            <span v-else>
              <span>{{ '¥ 0' }}</span>
            </span>
          </div>
          <div v-if="userInfo.length != 0">
            <span v-if="!selectUserFlag">
              <span
                :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''">{{
                    '¥ ' + $store.state.userInfo.allIndexProfitAndLose
                }}</span>
            </span>
            <span v-else>
              <span
                :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''">{{
                    '¥ ' + $store.state.userInfo.allProfitAndLose
                }}</span>
            </span>
          </div>

          <div v-if="userInfo.length == 0">
            <span class="bzz" v-if="!selectUserFlag">{{ '¥ 0' }}</span>
            <span class="bzz" v-else>{{ '¥ 0' }}</span>
          </div>
          <div v-if="userInfo.length != 0">
            <span class="bzz" v-if="!selectUserFlag">{{ '¥ ' + $store.state.userInfo.enableIndexAmt }}</span>
            <span class="bzz" v-else>{{ '¥ ' + $store.state.userInfo.enableAmt }}</span>
          </div>

        </div>
        <div class="btns" @click="handleZh()" :class="selectUserFlag ? '' : 'active'">
          <span>{{ selectUserFlag ? $t('hj142') : $t('hj143') }}</span>
        </div>
      </div>
      <div class="jy" @click="goToSettings()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/xiugaimima.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj144') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToTransfer()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/huazhuan2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj145') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToAuthentication()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj146') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToBankCard()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj147') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleOutLoginClick()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/out2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj148') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
    </div>
    <van-popup v-model="settingDialog" position="bottom" :style="{ height: '40%' }">
      <div class="setting_content">
        <div class="old_password">
          <div class="left_titles">
            <span>{{ $t('hj150') + ':' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="oldPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ $t('hj151') + ':' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="newPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ $t('hj152') + ':' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="cirNewPassword" />
          </div>
        </div>
        <div class="btn_setting" @click="changeLoginPsd()">
          <span>{{ $t('hj153') }}</span>
        </div>
      </div>
    </van-popup> -->
    <div class="head">
      <div class="tbox">
        <!-- <img src="~@/assets/img/yifu.png" />
        <img src="~@/assets/img/lingdang.png" /> -->

<!-- <van-popover
          v-model="showPopover"
          trigger="click"
          placement="bottom-end"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
           <div class="activeLanguage">{{ $t("jy502") }}</div>

            <div class="activeLanguage"></div>
          </template>
        </van-popover> -->

      </div>
      <div class="userHead">
        <div class="tl">
          <img class="touxiang" src="~@/assets/imgRed/touxiang.jpg" />
          <div class="mingzi">
            <p>{{ userInfo.phone ? userInfo.phone : userInfo.phone }}</p>
            <div class="feae" v-if="(!showBtn&&this.$store.state.userInfo.isActive != 1)">
              <img src="~@/assets/imgRed/jinse.png" />
              <span>已实名</span>
            </div>
            <div class="feae" v-if="(showBtn)" @click="$router.push('/smrz')">
              <img src="~@/assets/imgRed/yinse.png" />
              <span>未实名</span>
            </div>
          </div>
        </div>
        <div class="tr" @click="$router.push('/setup')"></div>
      </div>
    </div>
    <div class="zijk">
      <h5>
        账户总资产(沪深账户)
      </h5>
      <div class="kunk">
        <van-circle v-model="currentRate" :rate="rate" :clockwise="false" class="daxiao" color="#5d7dfb" layer-color="#e6e6e6" stroke-width="60" />
        <div class="zican">
          <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="yans">
            ¥{{ $store.state.hide ? '****' : $store.state.userInfo.userAmt ? (Number($store.state.userInfo.userAmt + $store.state.userInfo.userIndexAmt).toFixed(2)) : 0}}
          </p>
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay" class="yans">
            ¥{{ $store.state.hide ? '****' : $store.state.userInfo.userAmt ? (Number($store.state.userInfo.userAmt + $store.state.userInfo.userFuturesAmt).toFixed(2)) :0 }}
          </p>
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="yans">
            ¥&nbsp;&nbsp;{{ $store.state.hide ? '****' : $store.state.userInfo.userAmt ? (Number($store.state.userInfo.userAmt).toFixed(2)) : 0 }}
          </p>
          <p>账户总资产</p>
        </div>
      </div>
      <div class="boxk">
        <div class="bdan">
          <p style="display: flex; align-items: center;">
            <img
              src=""
              style="width: 0.4272rem; height: 0.4272rem; margin-right: 0.1602rem;" />
            沪深冻结保证金
          </p>
          <h6>
            ¥ {{ userInfo.length != 0 ? ($store.state.userInfo.allFreezAmt + $store.state.userInfo.djzj).toFixed(2) : 0 }}
          </h6>
        </div>
        <div class="bdan">
          <p style="display: flex; align-items: center;"><img
              src=""
              style="width: 0.4272rem; height: 0.4272rem; margin-right: 0.1602rem;"> 沪深可用资金</p>
          <h6 style="margin-left: 0.534rem;">
            <span class="bzz" v-if="!selectUserFlag">{{ '¥ ' + ($store.state.userInfo.enableIndexAmt || 0) }}</span>
            <span class="bzz" v-else>{{ '¥ ' + ($store.state.userInfo.enableAmt || 0) }}</span>
          </h6>
        </div>
        <div class="bdan">
          <p style="display: flex; align-items: center;"><img
              src=""
              style="width: 0.4272rem; height: 0.4272rem; margin-right: 0.1602rem;"> 持仓总盈利 </p>
          <h6 style="margin-left: 0.534rem;"> {{ '¥ ' + ($store.state.userInfo.allProfitAndLose || 0) }}</h6>
        </div>
        <div class="bdan">
          <p style="display: flex; align-items: center;"><img
              src=""
              style="width: 0.4272rem; height: 0.4272rem; margin-right: 0.1602rem;"> 账户总盈利</p>
          <h6 style="margin-left: 0.534rem;">{{ '¥ ' + ($store.state.userInfo.allProfitAndLose1 || 0) }}</h6>
        </div>
      </div>
      <div class="congz">
        <a @click="$router.push('/recharge')">银转证</a><a @click="$router.push('/withdraw')" class="tx">证转银</a>
      </div>
    </div>
    <div class="tile" style="font-size: 14px;">常用功能</div>
    <div class="usb">
      <div @click="$router.push('/loginPassword')" class="bl">
        <img
          src="">
        <p>登录密码</p>
      </div>
      <div @click="$router.push('/setPassword')" class="bl">
        <svg t="1670394224864" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4406" width="64" height="64"><path d="M874.4 394.2c-6.5-100.8-19.1-187.6-19.6-191.3-1.6-10.9-9.1-20-19.4-23.8L522.2 65.8c-6.6-2.4-13.9-2.4-20.5 0l-313 113.4c-10.4 3.8-17.8 12.9-19.4 23.8-0.5 3.6-13.2 90.5-19.6 191.3-3.8 59.6-4.6 111.6-2.4 154.6 2.9 57.3 11.1 98.3 25 125.6 20.5 40.1 79.8 97.9 181.3 176.8 72.7 56.5 140.9 103.1 141.6 103.6 5.1 3.5 11 5.2 16.9 5.2 5.9 0 11.8-1.7 16.9-5.2 0.7-0.5 68.9-47.1 141.6-103.6 101.4-79 160.7-136.8 181.2-176.9 13.9-27.2 22.1-68.3 25-125.5 2.2-43 1.4-95-2.4-154.7z m-648.2-165l226.5-82v306.7h-246c0.6-17 1.5-35.4 2.7-55.4 4.7-72.4 12.8-138.8 16.8-169.3z m407.6 574.7c-49.3 38.4-96.5 72.1-121.2 89.3V513.5h305.2c-1.2 82.7-11.9 118.6-19.6 133.7-9 17.9-42.5 61.9-164.4 156.7z" fill="#5d7dfb" p-id="4407"></path></svg>
        <p>资金密码</p>
      </div>
      <div class="bl" @click="$router.push('/FundingDetails')"><img
          src="">
        <p>资金流水</p>
      </div>
    </div>
    <div @click="$router.push('/bankCard')"
      style="display: flex; align-items: center; justify-content: space-between; margin: 0.534rem 0.267rem;"><span
        style="font-size: 14px;"> 金融卡 </span>
      <div style="font-size: 14px;"> 管理 <img
          src=""
          style="width: 0.1602rem; height: 0.2937rem;"></div>
    </div>
    <div style="overflow-x: auto; display: flex; margin: 0px 0.1rem;"></div>
    <div class="tile" style="font-size: 14px;">其它功能</div>
    <ul class="ganh" style="font-size: 14px;">
      <li @click="$router.push('/about?e=1')">
        <div class="le"><img
            src="">
          <p>版本更新</p>
        </div><span></span>
      </li>
      <li @click="$router.push('/about?e=2')">
        <div class="le"><img
            src="">
          <p>用户协议</p>
        </div><span></span>
      </li>
      <li @click="$router.push('/about?e=3')">
        <div class="le"><img
            src="">
          <p>隐私协议</p>
        </div><span></span>
      </li>
      <li @click="$router.push('/about?e=4')">
        <div class="le"><img
            src="">
          <p>关于我们</p>
        </div><span></span>
      </li>
    </ul>
  </div>
</template>

<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, pwdReg } from "@/utils/utils";
import { MessageBox } from 'mint-ui'
import { compress } from "@/utils/imgupload";

export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true,
      settingDialog: false,
      oldPassword: "", // 旧密码
      newPassword: "", // 新密码
      cirNewPassword: "", //确认新密码
      userInfo: [],
      onlineService: "",
      currentRate: 100,
      rate: 0,
      showBtn: true,
    };
  },
  components: {
  },
  created() {
    this.getUserInfo();
    this.getInfoSite();
  },
  methods: {
    goOnline() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push('/service');
    },
    async getInfoSite() {
      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.onlineService = data.data.onlineService
      } else {
        Toast(data.msg)
      }
    },
    goWall() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push('/wallet')
    },
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;

      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.commit('dialogVisible', false);
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
        this.rate = data.data.enableAmt / data.data.userAmt * 100;
        if (data.data.isActive === 1 || data.data.isActive === 2) {
          this.showBtn = false
        }
      } else {
        this.$store.commit('dialogVisible', true);
      }
    },
    goToTopUp() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push("/wallet");
    },
    handleOutLoginClick() {
      // 退出登录
      MessageBox.confirm(this.$t('hj149') + '?', this.$t('hj165'), {
        confirmButtonText: this.$t('hj161'),
        cancelButtonText: this.$t('hj106'),
      }).then(() => {
        this.toRegister();
      }).catch(() => {

      });
    },
    goToSettings() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      // 每次打开dialog 清空密码数据
      this.settingDialog = !this.settingDialog;
      if (this.settingDialog) {
        this.oldPassword = "";
        this.newPassword = "";
        this.cirNewPassword = "";
      }
    },
    handleGoToTransfer() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push("/transfers");
    },
    handleGoToAuthentication() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push("/authentications");
    },
    handleGoToBankCard() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push("/bankCard");
    },
    async toRegister() {
      // 注销登陆
      window.localStorage.removeItem("USERTOKEN"); // 清空本地存储 USERTOKEN字段
      this.clearCookie();
      let data = await api.logout();
      if (data.status === 0) {
        // Toast(data.msg)
        this.$router.push("/login");
      } else {
        Toast(data.msg);
      }
      this.$router.push("/login");
    },
    async changeLoginPsd() {
      // 修改密码
      if (
        isNull(this.oldPassword) ||
        isNull(this.newPassword) ||
        isNull(this.cirNewPassword)
      ) {
        Toast(this.$t('hj154'));
        this.settingDialog = false;
      } else if (!pwdReg(this.newPassword)) {
        Toast(this.$t('hj19'));
        this.settingDialog = false;
      } else {
        // 修改密码
        if (this.newPassword === this.cirNewPassword) {
          let opts = {
            oldPwd: this.oldPassword,
            newPwd: this.newPassword
          };
          let data = await api.changePassword(opts);
          if (data.status === 0) {
            this.changeLoginPsdBox = false;
            Toast(data.msg);
            this.settingDialog = false;
          } else {
            Toast(data.msg);
            this.settingDialog = false;
          }
        } else {
          Toast(this.$t('hj155'));
          this.settingDialog = false;
        }
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    }
  }
};
</script>

<style scoped>
.user_page {
  background-color: #fff;
  font-size: 14px;
  padding-bottom: 1.3rem;
}

.head {
  height: 5.67rem;
  width: 100%;
  background: url('~@/assets/home/bjing.b7cbcd97.png') no-repeat 50%;
  background-size: 100%;
  position: relative;
}

.tbox {
  height: 0.1748rem;
  width: 9.345rem;
  margin: 0 auto;
  text-align: right;
}

.tbox img {
  width: 0.5073rem;
  height: 0.5073rem;
  margin-top: 0.3204rem;
  margin-left: 0.2136rem;
}

.userHead {
  display: flex !important;
  width: 8.6775rem !important;
  margin: 0 auto !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  margin-top: 0.534rem !important;
}

.tl {
  display: flex;
}

.touxiang {
  width: 1.602rem;
  height: 1.602rem;
  border-radius: 50%;
}

.tr {
  width: 0.534rem;
  height: 0.534rem;
  background: url() no-repeat 50%;
  background-size: 100%;
  margin-top: 0.534rem;
}

.feae {
  width: 2.0025rem !important;
  height: 0.534rem !important;
  background: #5d7dfb !important;
  border-radius: 10px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
  margin-top: 0.267rem !important;
}

.feae img {
  width: 0.3738rem;
  height: 0.3738rem;
}

.tl div {}

.mingzi {
  margin-left: 0.3204rem !important;
  color: #fff !important;
  font-size: .3738rem !important;
  margin-top: 0.267rem !important;
}

.zijk {
  width: 9.345rem;
  padding-bottom: 0.1335rem;
  background: #fff;
  -webkit-box-shadow: 0 0.04626rem 0.1335rem 0 rgb(0 0 0 / 10%);
  box-shadow: 0 0.04626rem 0.1335rem 0 rgb(0 0 0 / 10%);
  border-radius: 0.267rem;
  margin: 0 auto;
  margin-top: -2.4685rem;
  z-index: 2;
  position: relative;
}

.zijk h5 {
  margin-left: 0.267rem;
  padding-top: 0.5073rem;
  font-weight: 500;
  color: #333;
  font-size: 0.3204rem;
}

.kunk {
  padding: 0.4005rem;
  margin: 0 auto;
  margin-top: 0.5073rem;
  position: relative;
}

.boxk {
  width: 8.01rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 0.534rem;
}

.bdan {
  width: 50%;
  margin-bottom: 0.4272rem;
}

.bdan h6 {
  color: #ea3544;
  font-size: 0.3738rem;
  margin-top: 0.0801rem;
  font-weight: 700;
  margin-left: 0.534rem;
}

.congz {
  width: 95%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 0.2937rem;
  padding-bottom: 10px;
}

.congz a {
  width: 48%;
  height: 1.068rem;
  background: #ea4445;
  border-radius: 0.1335rem;
  color: #fff !important;
  font-size: 0.3738rem;
  text-align: center;
  line-height: 1.068rem;
}

.tx {
  background: #17b780 !important;
}

.tile {
  margin: 0.534rem 0.267rem;
}

.usb {
  width: 9.345rem;
  height: 2.5365rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
  -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
  border-radius: 10px;
}

.bl {
  width: 25%;
  text-align: center;
}
.bl svg{
  width: 0.7743rem;
    height: 0.7743rem;
}
.bl img {
  width: 0.7743rem;
  height: 0.7743rem;
}

.bl p {
  color: #333;
  font-size: 0.3738rem;
  margin-top: 0.267rem;
}

.ganh {
  -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
  border-radius: 10px;
  margin: 0.267rem;
  padding: 0.267rem;
  list-style: none;
}

.ganh li {
  border-bottom: 0.0267rem solid #ccc;
  height: 1.2282rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.le {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0.3471rem;

}

.ganh li .le img {
  width: 0.534rem;
  height: 0.534rem;
}

.ganh li .le p {
  color: #333;
  font-size: 0.3738rem;
  line-height: 0.534rem;
  margin-left: 0.1602rem;
}

.ganh li span {
  width: 0.1602rem;
  height: 0.2937rem;
  background: url() no-repeat 50%;
  background-size: 100%;
  margin-top: 0.534rem;
}

.daxiao {
  width: 100% !important;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.zican {
  padding: 1.069335rem;
  margin: 0 auto;

  position: relative;
  font-size: 14px;
}

.yans {
  color: #5d7dfb !important;
  font-size: 0.3738rem !important;

}

.zican p {
  text-align: center;
  color: #333;
  font-size: 0.3204rem;
  padding-top: 0.0835rem;
}
</style>


